<template>
   <div class="app-container">
     <el-row>
       <el-col :span="24" class="card-box">
         <el-card>
           <div slot="header"><span><i class="el-icon-monitor"></i>资源需求信息 </span>     
           
          <el-button type="info" round >集中式资源分配</el-button>
          <el-button type="info" round>分布式资源分配</el-button>
         </div>
           <div class="el-table el-table--enable-row-hover el-table--medium">
             <table cellspacing="0" style="width: 100%">
               <tbody>
                 <tr>
                   <td class="el-table__cell is-leaf"><div class="cell">企业名称</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">链点名称</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">所需资源</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">所需数量</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">所需资源</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">所需数量</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">预算输出</div></td>
                 </tr>
                 <tr>
                   <td class="el-table__cell is-leaf"><div class="cell">企业1</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">No.xx</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">车胎</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">100</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">锂电池</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">2000</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">300000</div></td>
                 </tr>
                 <tr>
                   <td class="el-table__cell is-leaf"><div class="cell">企业2</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">No.xx</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">车灯</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">200</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">锂电池</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">3000</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell">100000</div></td>
                 </tr>
               </tbody>
             </table>
           </div>
         </el-card>
       </el-col>
 
       <el-col :span="12" class="card-box">
         <el-card>
           <div slot="header"><span><i class="el-icon-pie-chart"></i> 区域潜在领域分布</span></div>
           <div class="el-table el-table--enable-row-hover el-table--medium">
            <div>
             <div ref="chart" style="width: 600px; height: 400px;"></div>
            </div>
             <div ref="commandstats" style="height: 420px" />
           </div>
         </el-card>
       </el-col>
 
       <el-col :span="12" class="card-box">
         <el-card>
           <div slot="header"><span><i class="el-icon-odometer"></i> 竞争企业资源的分布情况</span></div>
           <div class="el-table el-table--enable-row-hover el-table--medium">
          <el-col :span="12" class="card-box">
            <div class="chart-container" ref="chart1"></div>
          </el-col>
          <el-col :span="12" class="card-box">
            <div class="chart-container" ref="chart2"></div>
          </el-col>
             <div ref="usedmemory" style="height: 420px" />
           </div>
         </el-card>
       </el-col>
     </el-row>
   </div>
 </template>

 <script>
 import * as echarts from 'echarts';

 export default {
  mounted() {
    this.renderChart();
    this.initChart1();
    this.initChart2();
  },
  methods: {
    renderChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);

      const option = {
        xAxis: {
    type: 'category',
    data: ['原材料', '核心企业', '供应商', '经销商']
  },
  yAxis: {
    type: 'value',
    splitNumber:4
  },
  series: [
    {
      data: [2, 3, 3,2],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
      };

      myChart.setOption(option);
    },
    initChart1(){
      const chartDom = this.$refs.chart1;
      const myChart1 = echarts.init(chartDom);

      const option = {
        title: {
          text: '锂电池资源占有率',
          left: 'right',
      
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
            { value: 735, name: '宁德时代',itemStyle: { color: '#FF0000' } },
              { value: 484, name: '派能科技',itemStyle: { color: '#FFA500' } }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0.5, 0.1, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart1.setOption(option);
    
    },
    initChart2(){
      const chartDom = this.$refs.chart2;
      const myChart2 = echarts.init(chartDom);

      const option = {
        title: {
          text: '铜、铁资源占有率',
          left: 'right'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 300, name: '资金矿业',itemStyle: { color: '#ADD8E6' } },
              { value: 484, name: '澳洲力拓集团',itemStyle: { color: '#008000' } },
              { value: 800, name: '欧洲矿业',itemStyle: { color: '#000080' } }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0.5, 0.1, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart2.setOption(option);
    
    }
  }
};
</script>

<style>
.chart-container {
  width: 300px;
  height: 500px;
}
</style>



 
 